<template>
  <div>
    <input id="ipt" v-model="message1" type="text" />
    <input v-model="message2" type="text" />

    <button @click="stopWatch">停止监听</button>
  </div>
</template>

<script setup lang="ts">
import { ref, watchEffect } from "vue";

let message1 = ref("大宝");
let message2 = ref("二宝");

const stop = watchEffect(
  (oninvallidate) => {
    oninvallidate(() => {
      console.log("before"); // 在 停止监听前 和 数据变化时 执行
    });

    const ipt = document.querySelector("#ipt");
    console.log("ipt", ipt); // flush 设置为 post 初始化监听时才能获取到 DOM 元素

    console.log("message1值===>", message1.value);
    console.log("message2值===>", message2.value);

    // stop() // 停止监听
  },
  {
    flush: "post", // 1.pre 组件加载之前调用；2.sync 同步执行；3.post 组件加载之后调用

    // 调试工具
    // onTrigger(_e) {
    //   debugger;
    // },
  }
);

const stopWatch = () => stop();
</script>
